<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <style>
    	html, body {
		    height: 100%;
		    margin: 0px;
		    padding: 0px;
		    overflow: hidden;
		    -webkit-touch-callout: none;
		    -webkit-user-select: none;
		}
		
		.mui-content {
		    height: 100%;
		    overflow: auto; 
		}
		
		#bottomx span{
			text-align: center;
		}
    </style>
</head>
<body>    
    <header class="mui-bar mui-bar-nav myHeader" style="position: fixed;">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"><span style="font-size: 15px;">微信</span></a>
		    <h1 class="mui-title" style="color: white;"></h1>
	</header>
	<div class="mui-content">
		<div></div>
	</div>
	<nav class="mui-bar mui-bar-tab" id="bottomx" style="text-align: center;">
		<div style="width: 100%;padding-bottom:5px;border-bottom: 1px solid #B7B7BB;">
			<span class="mui-icon mui-icon-mic" style="width: 10%;float: left;"></span>
			<textarea id="textarea" style="width: 70%;border-radius: 5px;margin: 5px 0 -11px 0;float: left;height: 40px;overflow: hidden;"></textarea>
			<span class="mui-icon mui-icon-spinner-cycle mui-spin" style="width: 10%;float: left;"></span>
			<span class="mui-icon mui-icon-plus" id='add' style="width: 10%;"></span>
		</div>
		<div class="list" style="display: none;">
			<a class="mui-tab-item" id="getPhoto">
	        	<span class="mui-icon mui-icon-image"></span>
	        	<span class="mui-tab-label">图片</span>
	    	</a>
	    	<a class="mui-tab-item" id="btn">
	        	<span class="mui-icon mui-icon-camera"></span>
	        	<span class="mui-tab-label">拍摄</span>
	    	</a>
	    	<a class="mui-tab-item" id="btn2">
	        	<span class="mui-icon mui-icon-videocam"></span>
	        	<span class="mui-tab-label">视频聊天</span>
	    	</a>
	    	<a class="mui-tab-item">
	        	<span class="mui-icon mui-icon-location"></span>
	        	<span class="mui-tab-label">位置</span>
	    	</a>
		</div>
	</nav>
	<video></video>
	<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		mui.init();
		mui.plusReady(function () {
			
			$('#add').on('tap',function(){
				$('.list').slideToggle();
			});
			var myWindow= plus.webview.currentWebview();
			document.querySelector(".mui-title").innerHTML= myWindow.title;
			plus.webview.currentWebview().setStyle({
	   		    softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度
			});
			//获取图片
			document.getElementById("getPhoto").addEventListener("tap",function(){
			 	plus.gallery.pick(
			 	    function(e){
			 	        for(var i in e.files){
		    				$('.mui-content>div').append('<img width=100 height=100 src='+e.files[i]+'>');
	    				}				
			 	    },
			 	    function(){
			 	        			
			 	    },
			 	    {
			 	        filter:"image",multiple:true
			 	    }
			 	    )
			 	})
			//拍照
			document.getElementById("btn").addEventListener('tap',function(){
		        var cmr=plus.camera.getCamera(1);
		       	cmr.captureImage(function(p){
					plus.io.resolveLocalFileSystemURL(p, function(entry){
						$('.mui-content>div').append("<img src='"+entry.toLocalURL()+"' style='width:100px;' />");
					});
				}, function(e){
					alert('失败：'+e.message);
				}, {filename:'_doc/camera/',index:1});
		    });	
		    //拍摄
		    document.getElementById("btn2").addEventListener('tap',function(){
		        var cmr=plus.camera.getCamera(1);
		       	cmr.startVideoCapture(function(p){
					plus.io.resolveLocalFileSystemURL(p, function(entry){
						$('.mui-content>div').append("<video src='"+entry.toLocalURL()+"' style='width:200px;'></video>");
					});
				}, function(e){
					alert('失败：'+e.message);
				}, {filename:'_doc/camera/',index:1});
		    });	
		});
	</script>
</body>
</html>

